<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡片管理</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            /*position: relative;*/
        }
        .con{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #a2aeb0;
        }
        .left{
            display: inline-block;
            position: absolute;
            width: 0;
            height: 100%;
            background-color: #04A78C;
            animation: move_left 0.8s linear;
            animation-delay: 1.2s;
            animation-fill-mode: forwards;
        }


        .top{
            display: inline-block;
            position: absolute;
            width: 100%;
            height: 0;
            top:0;
            left: 0;
            background-color: #4e65c7;
            animation: move_top 0.8s linear;
            animation-delay: 1.2s;
            animation-fill-mode: forwards;
        }
        .bottom{
            display: inline-block;
            position: absolute;
            width: 100%;
            height: 0;
            top:100%;
            left: 0;
            animation: bottom_star 2s linear;
            animation-fill-mode: forwards;
            background-color: #c7254e;
        }
        .bottom .card{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50%;
            height: 50%;
            transform: translate(-50%,-50%);
            border-radius: 5px;
            background-color: white;
            -webkit-animation-name:rubberBand;
            animation-name:rubberBand;
            animation-fill-mode: forwards;
            animation-delay: 2s ;
        }
        @keyframes bottom_star {
            0%{}
            50%{
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
            70%{}
            100%{
                width: 50%;
                height: 50%;
                top:50%;
                left: 50%;
                /*transform: translate(-50%,-50%);*/
            }
        }
        @keyframes move_left {
            from{}
            to{
                width: 50%;
                top: 0;
                left: 0;
            }
        }
        @keyframes move_top {
            from{}
            to{
                width: 50%;
                height: 50%;
                top:0;
                left: 50%;
            }
        }
        @keyframes rubberBand{
            0%{
                -webkit-transform:translate(-50%,-50%) scaleX(1);
                transform:translate(-50%,-50%) scaleX(1)
            }
            30%{
                -webkit-transform:translate(-50%,-50%) scale3d(1.25,.75,1);
                transform:translate(-50%,-50%) scale3d(1.25,.75,1)
            }
            40%{
                -webkit-transform:translate(-50%,-50%) scale3d(.75,1.25,1);
                transform:translate(-50%,-50%) scale3d(.75,1.25,1)
            }
            50%{
                -webkit-transform:translate(-50%,-50%) scale3d(1.15,.85,1);
                transform:translate(-50%,-50%) scale3d(1.15,.85,1)
            }
            65%{
                -webkit-transform:translate(-50%,-50%) scale3d(.95,1.05,1);
                transform:translate(-50%,-50%) scale3d(.95,1.05,1)
            }
            75%{
                -webkit-transform:translate(-50%,-50%) scale3d(1.05,.95,1);
                transform:translate(-50%,-50%) scale3d(1.05,.95,1)
            }
            to{
                -webkit-transform:translate(-50%,-50%) scaleX(1);transform:translate(-50%,-50%) scaleX(1)
            }
        }

        .left::after{
            content: '';
            display: block;
            position: fixed;
            /*background-color: #04A78C;*/
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .table-box{
            position: absolute;
            width: 90%;
            height: 90%;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: white;
            border-radius: 5px;
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            z-index: 20;
            box-shadow: 0 0 10px #666 ;
        }
        .table-box .table-top{
            width: 100%;
            height: 30%;
            background-color: #c7254e;
            border-radius: 5px 5px 0 0;
        }
        .table-box .table-bottom{
            width: 100%;
            height: 70%;
            background-color: yellow;
            border-radius: 0 0 5px 5px;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="left">
            <div class="table-box">
                <div class="table-top"></div>
                <div class="table-bottom"></div>
            </div>
        </div>
        <div class="top"></div>
        <div class="bottom">
            <div class="card"></div>
        </div>
    </div>
</body>
</html>